<template>
  <view>
    <navigator
        :openType="pages.length == 1 ? 'switchTab' : 'navigateBack'"
        :style="'top:' + nTop + 'px'"
        :url="pages.length == 1 ? '/pages/index/index4' : ''"
        class="UgobackFix"
        hoverClass="none"
    >
      <view class="i ico">{{ pages.length == 1 ? '' : '' }}</view>
    </navigator>
    <view class="dtl_bnr">
      <view class="bg">
        <image :src="D.bn_b_url" mode="aspectFill"></image>
        <view class="dl">
          <view class="dt">
            <image :src="D.path_s_url" mode="aspectFill"></image>
          </view>
          <view class="dd">
            <view class="h2">{{ D.title }}</view>
            <view class="h5">{{ D.title2 }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="dtl_box dtl_C">
      <view class="b">群介绍</view>
      <view class="em">
        <rich-text :nodes="content" class="p"></rich-text>
      </view>
    </view>
    <view :style="'--color:' + color" class="dtl_box">
      <view class="b">
        群成员
        <text class="font">（{{ ULIST.unum }}人）</text>
      </view>
      <view class="uli" @tap="qun_ulistFn">
        <view v-for="(item, index) in ULIST.list" :key="index" class="li">
          <image :src="item.photo_s" mode="aspectFill"></image>

          <text class="span">{{ item.nickname }}</text>

          <text v-if="!globalUtils.empty(item.qz)" class="font">群主</text>
        </view>
        <text class="i ico"></text>
      </view>
    </view>
    <view class="dtl_box">
      <view class="b">加入条件</view>
      <view class="tjul">
        <view v-for="(item, index) in TJ" :key="index" class="li">
          <text class="font">{{ item.t }}</text>

          {{ item.c }}
        </view>
      </view>
    </view>
    <view :style="'--color:' + color + ';--rgbcolor:' + rgbcolor" class="dtl_box">
      <view class="b">入群福利</view>
      <view class="fuliul">
        <rich-text v-if="!globalUtils.empty(FL)" :nodes="FL" class="li"></rich-text>
        <view class="br">● 群内集中了精准条件优质会员，入群后能更精准快速找到意中人</view>
        <view class="br">● 群员都是急需脱单会员，非常期待与群友偶遇相识</view>
        <view class="br">● 群员有机会拥有与高端人士相识并发展成爱情</view>
      </view>
    </view>
    <view class="dtl_btm">
      <view class="a enter fadeInUp" @tap="BTNfn">
        <text class="ico">{{ BTN.price > 0 ? '' : ' ' }}</text>
        {{ BTN.title }}
      </view>
    </view>
    <view v-if="backtop_flag" :style="'color:' + color" class="backtop fadeInUp" data-id="index" @tap="backtopFn">
      <text class="ico icon-backtop"></text>
      顶部
    </view>
    <view class="blank"></view>
    <!-- parse <include src="../login.wxml"></include> -->
    <block>
      <view v-if="div_login" class="mask3 alpha0_100">
        <view
            class="div_box big_normal"
            style="--div_box_width: 82%; --div_box_height: 666rpx; background: -webkit-linear-gradient(top, #fde9ee 1%, #fff 150%); background-color: #fff"
        >
          <view :style="'border-color:rgba(' + rgbcolor + ',.2);'" class="m">
            <image mode="aspectFit" src="/static/res/img/photo_m.png"></image>
          </view>
          <view class="S22 B">登录后获得更精准推荐</view>
          <view class="loginagree">
            <checkbox-group @change="ifagreeFn">
              <label style="margin-left: -10rpx">
                <checkbox :style="'--color:' + color + ';'" value="1"></checkbox>
                <text class="C666 vmiddle">阅读并同意</text>
              </label>
            </checkbox-group>
            <navigator :style="'color:' + color" class="vmiddle" hoverClass="none"
                       url="/pagesA/about/law?kind=agreement">用户协议
            </navigator>
            <text class="C666 vmiddle">与</text>
            <navigator :style="'color:' + color + ';'" class="vmiddle" hoverClass="none"
                       url="/pagesA/about/law?kind=declara">隐私条款
            </navigator>
          </view>
          <button
              v-if="ifagree"
              :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';width:73%'"
              class="btn5 W90_"
              openType="getPhoneNumber"
              @getphonenumber="getPhoneNumber"
          >
            <text>手机号快捷登录</text>
            <text :style="'color: ' + color + ';'">私密</text>
          </button>
          <button v-else :style="'--color:' + color + ';--rgbcolor:' + rgbcolor + ';width:73%'"
                  class="btn5" @tap="ifagree_passFn">
            <text>手机号快捷登录</text>
            <text :style="'color: ' + color + ';'">私密</text>
          </button>
          <view class="C666" @tap="back">
            <text style="border-bottom: #999 1px solid">暂不登录</text>
          </view>
        </view>
      </view>
    </block>
    <!-- parse <include src="../component/sorry.wxml"></include> -->
    <block>
      <view v-if="div_vip" :class="'mask2 ' + mask_class" data-maskid="div_vip" @tap="mask_closeFn">
        <view :style="'--div_box_width:600rpx;--div_box_height:' + (div_vip_H > 0 ? div_vip_H : 480) + 'rpx;'"
              class="div_box div_vip"
              @tap.stop.prevent="emptyFn">
          <view class="closebtm ico" data-maskid="div_vip" @tap.stop.prevent="mask_closeFn"></view>
          <view class="h1">{{ div_vip_title }}</view>
          <text v-if="!globalUtils.empty(div_vip_content)" class="C S15">{{ div_vip_content }}</text>
          <block v-else>
            <view class="C S15">开通VIP超级会员，专享超值权益</view>
            <view class="C S15">相亲成功率大大提升</view>
          </block>
          <view class="ico picico"></view>
          <view class="btn_btm btn44 ico" @tap.stop.prevent="vipFn"> 立即开通</view>
        </view>
      </view>
      <view v-if="div_cert" :class="'mask2 ' + mask_class" data-closekind="back" data-maskid="div_cert"
            @tap="mask_closeFn">
        <view class="div_box div_cert" style="--div_box_width: 600rpx; --div_box_height: 480rpx"
              @tap.stop.prevent="emptyFn">
          <view class="closebtm ico" data-closekind="back" data-maskid="div_cert" @tap.stop.prevent="mask_closeFn">
          </view>
          <view class="h1">{{ div_cert_title }}</view>
          <view class="C S15">成为认证用户，即享沟通特权</view>
          <view class="C S15">提高诚信值，杜绝虚假</view>
          <view class="ico picico"></view>
          <view class="btn_btm btn44 ico" @tap.stop.prevent="certFn">立即认证</view>
        </view>
      </view>
      <view v-if="div_data" :class="'mask2 ' + mask_class" data-closekind="back" data-maskid="div_data"
            @tap="mask_closeFn">
        <view :style="'--div_box_width:600rpx;--div_box_height:490rpx;--color:' + color + ';--rgbcolor:' + rgbcolor"
              class="div_box div_data"
              @tap.stop.prevent="emptyFn">
          <view class="closebtm ico" data-closekind="back" data-maskid="div_data" @tap.stop.prevent="mask_closeFn">
          </view>
          <view class="h1">{{ div_data_title }}</view>
          <view class="C S15">赶快去完善，解锁更多功能</view>
          <view class="C S15">完成资料，上传头像，受关注度暴增</view>
          <view class="C S15 Cf00">如果还未审核，请等待审核</view>
          <view class="ico picico"></view>
          <view class="btn_btm btn44 ico" @tap.stop.prevent="dataFn">立即完善</view>
        </view>
      </view>
      <view v-if="div_gps" :class="'mask2 ' + mask_class" data-closekind="back" data-maskid="div_gps"
            @tap="mask_closeFn">
        <view :style="'--div_box_width:550rpx;--div_box_height:480rpx;--color:' + color + ';--rgbcolor:' + rgbcolor"
              class="div_box div_gps"
              @tap.stop.prevent="emptyFn">
          <view class="closebtm ico" data-closekind="back" data-maskid="div_gps" @tap.stop.prevent="mask_closeFn">
          </view>
          <view class="h1">{{ div_gps_title }}</view>
          <view class="C S15">授权后，将自动获取您当前位置</view>
          <view class="C S15">否则将无法使用《附近的人》功能</view>
          <view class="ico picico"></view>
          <view class="btn_btm btn44 ico" @tap.stop.prevent="gpsFn">同意获取位置</view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import globalUtils from "../../res/www.a9a.cn";

var t;
var n = require('../../@babel/runtime/helpers/defineProperty');
var i = require('../../res/www.a9a.cn.js');
var app = getApp();
export default {
  computed: {
    globalUtils() {
      return globalUtils
    }
  },
  data() {
    return {
      mask_class: 'alpha0_100',
      id: '',
      color: '',
      rgbcolor: '',
      backtop_flag: false,

      D: {
        bn_b_url: '',
        path_s_url: '',
        title: '',
        title2: ''
      },

      ULIST: {
        unum: '',
        list: []
      },

      TJ: '',
      content: '',
      FL: '',

      BTN: {
        price: 0
      },

      SHARE: '',
      ios_ifpay: '',
      div_login: false,
      ifagree: false,
      pages: [],
      nTop: '',
      div_vip: '',
      div_vip_H: 0,
      div_vip_title: '',
      div_vip_content: '',
      div_cert: '',
      div_cert_title: '',
      div_data: '',
      div_data_title: '',
      div_gps: [],
      div_gps_title: ''
    };
  },
  onLoad: function (t) {
    var that = this;
    this.setData({
      id: t.id
    });
    app.globalData.get_config('_ZEAI').then(function (t) {
      that.setData({
        color: app.globalData._ZEAI.color,
        rgbcolor: i.c16_rgb(app.globalData._ZEAI.color)
      });
    });
    app.globalData.get_navigationBarTopHeight(this);
    app.globalData.get_openid().then(function (t) {
      that.init();
    });
  },
  onPageScroll: function (t) {
    t.scrollTop > 100
        ? this.setData({
          backtop_flag: true
        })
        : this.setData({
          backtop_flag: false
        });
  },
  onShareAppMessage: function (t) {
    return {
      imageUrl: this.SHARE.imgurl,
      title: this.SHARE.title,
      path: '/pagesA/qun/qun_detail?id=' + this.id
    };
  },
  onShareTimeline: function () {
    return {
      imageUrl: this.SHARE.imgurl,
      title: this.SHARE.title,
      query: 'id=' + this.id,
      path: '/pagesA/qun/qun_detail'
    };
  },
  methods: {
    init: function () {
      var that = this;
      i.ifint(this.id) ||
      uni.showModal({
        content: '参数跑路了',
        confirmColor: that.color,
        confirmText: '朕知道了',
        showCancel: false,
        success: function (t) {
          uni.navigateBack();
        }
      });
      uni.showLoading({
        title: '玩命加载中...',
        mask: true
      });
      t = uni.getStorageSync('COOK_U');
      app.globalData.ajax({
        url: 'qun.php',
        data: {
          submitok: 'qun_detail',
          openid: t.openid,
          id: that.id
        },
        success: function (t) {
          if (1 == t.flag) {
            t.D.plist;
            var a = i.escape2Html(t.D.content);
            that.setData({
              D: t.D,
              ULIST: t.ULIST,
              TJ: t.TJ,
              content: a,
              FL: t.FL,
              BTN: t.BTN,
              SHARE: t.SHARE,
              ios_ifpay: t.ios_ifpay
            });
          } else {
            uni.showToast({
              title: t.msg,
              icon: 'none',
              mask: true
            });
          }
          uni.hideLoading();
        }
      });
    },

    BTNfn: function () {
      if (1 != this.BTN.iflogin) {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      } else {
        if (1 == this.BTN.ifed) {
          uni.navigateTo({
            url: '/pagesA/qun/qun_trend?qid=' + this.id
          });
        } else {
          this.qun_add();
        }
      }
    },

    qun_add: function () {
      var that = this;
      app.globalData.ajax({
        url: 'qun.php',
        data: {
          submitok: 'joinqun',
          openid: t.openid,
          id: that.id
        },
        success: function (o) {
          1 == o.flag
              ? that.init()
              : 'pay' == o.flag
                  ? uni.showModal({
                    title: '您确定要加入此群么？',
                    content: '如果同意加入该单身群\n需要支付￥' + o.money + '元\n（支付后将不退还）',
                    confirmColor: that.color,
                    cancelText: '我再想想',
                    confirmText: '确定加群',
                    success: function (o) {
                      if (o.confirm) {
                        1 != that.ios_ifpay.flag
                            ? uni.getSystemInfo({
                              success: function (o) {
                                'ios' == o.platform
                                    ? uni.showModal({
                                      title: '温馨提示',
                                      content: that.ios_ifpay.tips,
                                      confirmColor: that.color,
                                      cancelText: '返回',
                                      confirmText: '联系经纪人',
                                      success: function (t) {
                                        t.confirm
                                            ? uni.redirectTo({
                                              url: '/myPages/hongniang/hongniang'
                                            })
                                            : t.cancel && uni.navigateBack();
                                      }
                                    })
                                    : app.globalData.pay({
                                      data: {
                                        submitok: 'qun_add',
                                        openid: t.openid,
                                        id: that.id
                                      },
                                      success: function () {
                                        uni.showModal({
                                          title: '加入成功！',
                                          content: '恭喜您成为本群中的一员，您可以与群友一起交流邂逅啦~~~',
                                          confirmColor: that.color,
                                          confirmText: '朕知道了',
                                          showCancel: false,
                                          success: function (t) {
                                            that.init();
                                          }
                                        });
                                      },
                                      fail: function (t) {
                                        t.this = that;
                                        t.url = 'no';
                                        i.sorry(t);
                                      }
                                    });
                              }
                            })
                            : app.globalData.pay({
                              data: {
                                submitok: 'qun_add',
                                openid: t.openid,
                                id: that.id
                              },
                              success: function () {
                                uni.showModal({
                                  title: '加入成功！',
                                  content: '恭喜您成为本群中的一员，您可以与群友一起交流邂逅啦~~~',
                                  confirmColor: that.color,
                                  confirmText: '朕知道了',
                                  showCancel: false,
                                  success: function (t) {
                                    that.init();
                                  }
                                });
                              },
                              fail: function (t) {
                                t.this = that;
                                t.url = 'no';
                                i.sorry(t);
                              }
                            });
                      }
                    }
                  })
                  : ((o.this = that), (o.url = 'no'), i.sorry(o));
        }
      });
    },

    vipFn: function () {
      app.globalData.chklogin().then(function (t) {
        t
            ? uni.navigateTo({
              url: '/pagesA/my_vip/my_vip'
            })
            : uni.navigateTo({
              url: '/pages/login/login'
            });
      });
    },

    certFn: function () {
      app.globalData.chklogin().then(function (t) {
        t
            ? uni.navigateTo({
              url: '/myPages/cert/cert'
            })
            : uni.navigateTo({
              url: '/pages/login/login'
            });
      });
    },

    dataFn: function () {
      app.globalData.chklogin().then(function (t) {
        t
            ? uni.navigateTo({
              url: '/pagesA/reg/reg'
            })
            : uni.navigateTo({
              url: '/pages/login/login'
            });
      });
    },

    mask_closeFn: function (t) {
      var that = this;
      var a = t.currentTarget.dataset.maskid;
      this.setData({
        mask_class: 'alpha100_0'
      });
      setTimeout(function () {
        var t;
        that.setData((n((t = {}), a, false), n(t, 'mask_class', 'alpha0_100'), t));
      }, 500);
    },

    qun_ulistFn: function () {
      1 != this.BTN.iflogin
          ? uni.navigateTo({
            url: '/pages/login/login'
          })
          : uni.navigateTo({
            url: '/pagesA/qun/qun_ulist?qid=' + this.id
          });
    },

    getPhoneNumber: function (t) {
      this.init();
      app.globalData.getPhoneNumber({
        e: t,
        url: '/pages/my/my',
        urlkind: 'switchTab'
      });
    },

    back: function () {
      this.setData({
        div_login: false
      });
    },

    backtopFn: function (t) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },

    zxFn: function () {
      uni.pageScrollTo({
        scrollTop: 999999,
        duration: 300
      });
    },

    telFn: function (t) {
      uni.makePhoneCall({
        phoneNumber: this.D.kf_tel
      });
    },

    mobFn: function (t) {
      uni.makePhoneCall({
        phoneNumber: this.D.kf_mob
      });
    },

    ifagreeFn: function (t) {
      1 == t.detail.value
          ? this.setData({
            ifagree: true
          })
          : this.setData({
            ifagree: false
          });
    },

    ifagree_passFn: function () {
      uni.showToast({
        title: '请先点击同意《用户协议》和《隐私条款》',
        icon: 'none',
        mask: true,
        duration: 3000
      });
    },

    emptyFn() {
      console.log('占位：函数 emptyFn 未声明');
    },

    gpsFn() {
      console.log('占位：函数 gpsFn 未声明');
    }
  }
};
</script>
<style>
@import 'qun_detail.css';
</style>
